
<template>
  <!--搜索框 begin  style="margin-bottom:0.5rem"-->
  <div v-if="hasTitle">
    <div class="cm-search-title bor-bot" style="position: relative;">
      <div  class="cm-search-title-div height-70" v-bind:class="{ 'cm-search-display': isShowSearch,'cm-search-right':!isShowSearch}" v-bind:style="{width: inputWidth}">
        <i  class="paco icon-search"></i>
        <input  v-model="value" type="text" maxlength="20"  class="inputheight" @input="searchInputCall" @focus="searchFocusCall"  :placeholder="placeholder" name=""
                onkeyup="value=value.replace(/[^a-zA-Z0-9\u4e00-\u9fa5]/g,'')"
                onblur="value=value.replace(/[^a-zA-Z0-9\u4e00-\u9fa5]/g,'')"
        >
        <i  class="empty" @click="clearCall"></i>
      </div>
      <button class="btn height-70 cm-search-title-button btnDisNo font-30" style="width:16%;" @click="searchCall" v-show="isShowSearch">搜索</button>
    </div>
  </div>

  <div class="cm-search bor-bot" v-else >
    <div style="float:left;" class="cm-search-div height-70" v-bind:class="{ 'cm-search-display': isShowSearch,'cm-search-right':!isShowSearch}" v-bind:style="{width: inputWidth}">
      <i  class="paco icon-search"></i>
      <input  v-model="value" type="text" maxlength="20"  class="inputheight" @input="searchInputCall" @focus="searchFocusCall"  :placeholder="placeholder" name="">
      <i  class="empty" @click="clearCall"></i>
    </div>
    <button class="btn height-70 cm-search-button btnDisNo font-30" style="width:16%;" @click="searchCall" v-show="isShowSearch">搜索</button>
  </div>
  <!--搜索框 end  -->
</template>
<style>
  .cm-search-title{
    /*position: fixed;*/
    z-index: 1001;
    width: 100%;
    height: 4.85rem;
    background-color: #fff;
  }
  .cm-search-title-div{
    margin-top:2.5rem;
    margin-left: 0.75rem;
    border-radius: 8px;
    background:#fff;
    float:left;
    width:100%;
    border: 1px solid #e5e5e5;
  }
  .cm-search-title-button{
    float: left;
    margin-left: 0.55rem;
    margin-top: 2.55rem;
  }
</style>
<script>
  export default{
    name:"search",
    data(){
      return{
        inputWidth:"91.5%",//输入框宽度
        value:"",//话题 观点 我名
        isShowSearch:false,//是否显示搜索按钮
        bool:false,//输入的限制规则
      }
    },
    props: {
      searchInput:Function,
      searchFocus:Function,
      clear:Function,
      search:Function,
      hasTitle:{type:Boolean,default:false},
//      showResult:{type:Boolean,default:false},
      placeholder:{type:[String,String],default:"搜索话题、观点"}
    },
    methods:{
      searchInputCall(){

      },
      searchFocusCall(){
      },
      clearCall(){
          var vm = this;
        this.value="";
        this.isShowSearch=false;//隐藏搜索按钮
        vm.showResult=false;//隐藏搜索结果
        this.inputWidth="91.5%";//设置输入框宽度
      },
      searchCall(){
        this.search(this.value);
      }
    },
    //输入框监听事件
    watch:{
      value(){//输入框监听事件
        var vm = this;
        this.value=this.value.replace(/\s/g,"");//去除空格
        if(this.value.length!=0){
          this.isShowSearch=true;//显示搜索按钮
//          vm.showResult=true;//显示搜索结果
          this.inputWidth="73%";//设置输入框宽度
        }else{
          let regex="^[a-zA-Z0-9\u4E00-\u9FA5]+$";
          this.isShowSearch=false;//隐藏搜索按钮
//          vm.showResult=false;//隐藏搜索结果
          this.inputWidth="91.5%";//设置输入框宽度
        }
      }
    }
  }
</script>
